<script setup lang="ts">
uni.hideTabBar()

const isDark = ref('')
const isMoney = ref(false)
const chartData = ref({})

uni.onThemeChange((res) => {
  isDark.value = res.theme
})

const opts = {
  title: {
    name: '80%',
    fontSize: 20,
    color: '#4A4B9D',
  },
  subtitle: {
    name: '已消费',
    fontSize: 12,
    color: '#666666',
  },
  extra: {
    arcbar: {
      type: 'default',
      width: 12,
      backgroundColor: '#E9E9E9',
      startAngle: 0.75,
      endAngle: 0.25,
      gap: 2,
      linearType: 'custom',
    },
  },
}
function getServerData() {
  // 模拟从服务器获取数据时的延时
  setTimeout(() => {
    const res = {
      series: [
        {
          name: '已消费',
          color: '#4338ca',
          data: 0.8,
        },
      ],
    }
    chartData.value = JSON.parse(JSON.stringify(res))
  }, 500)
}
getServerData()
</script>

<template>
  <view class="p-sm text-sm">
    <!-- 标题 -->
    <LayoutsAside title="Wallet" />

    <!-- 卡片 -->
    <view class="relative mb-lg overflow-hidden rounded-xl bg-theme p-sm text-white shadow-xl">
      <view class="absolute bottom--15 right--15 h-35 w-35 rounded-1/2" :class="isDark === 'dark' ? 'bg-dark' : 'bg-light'" />
      <view class="mb-sm flex justify-between">
        <view>我的总资产</view>
        <view @click="isMoney = !isMoney">
          <view v-show="isMoney" i-carbon:view />
          <view v-show="!isMoney" i-carbon:view-off />
        </view>
      </view>
      <view class="mb-lg flex items-baseline text-5">
        <view i-material-symbols:currency-yuan-rounded />
        <!-- <view i-material-symbols:attach-money /> -->
        <text class="ml-1 text-10 font-500">
          250.00
        </text>
      </view>
      <view class="flex items-center opacity-80">
        可支配资产: <view i-material-symbols:attach-money />0.00
      </view>
      <view class="flex items-center opacity-80">
        当前负债: <view i-material-symbols:attach-money />0.00
      </view>
    </view>

    <view class="mb-xl flex">
      <view class="mr-lg flex flex-1 flex-col justify-between border-1 border-theme rounded-xl border-solid p-sm shadow-lg">
        <view>
          今日计划消费: <text class="text-5 text-theme">
            0.00
          </text>
        </view>
        <view>
          本周计划消费: <text class="text-5 text-theme">
            0.00
          </text>
        </view>
        <view>
          本月计划消费: <text class="text-5 text-theme">
            0.00
          </text>
        </view>
      </view>
      <view class="h-30 w-40">
        <qiun-data-charts type="arcbar" :opts="opts" :chart-data="chartData" />
      </view>
    </view>

    <!-- list -->
    <view>
      <view class="relative mb-sm pl-2 text-4 font-700">
        <text>消费明细</text>
        <span class="absolute left-0 top-0.8 h-4 w-1 rounded-1 bg-theme" />
      </view>

      <view class="mb-sm">
        类型筛选：支出/收益
      </view>

      <view>
        <view v-for="item in 3" :key="item" :class="isDark === 'dark' ? 'List-dark' : 'List-light'" class="relative mb-sm flex items-center justify-between overflow-hidden rounded-sm p-sm pl-5">
          <view class="absolute left--5.5 top-0 h-14 w-12 rounded-1/2 bg-theme" />
          <view class="flex items-center pl-sm">
            <view i-material-symbols:currency-yuan-rounded class="text-3" />
            <text class="text-4.5">
              0.00
            </text>
          </view>
          <view class="flex items-center opacity-80" :class="item % 2 !== 0 ? 'text-red' : 'text-theme'">
            <view v-if="item % 2 === 0" class="mr-1" i-material-symbols:trending-up-rounded />
            <view v-else class="mr-1" i-material-symbols:trending-down />
            {{ item % 2 === 0 ? '收益' : '支出' }}
          </view>
        </view>
      </view>
    </view>
  </view>

  <LayoutsTabBar />
</template>

<style>
.List-light {
  border-right: 2px solid var(--theme-color);
  box-shadow: 1px 1px 8px #eef2ff;
  border-radius: 5px;
}
.List-dark {
  border-right: 2px solid var(--theme-color);
  box-shadow: 1px 1px 8px black;
  border-radius: 5px;
}
</style>
